var oform=document.querySelector("form")
var judge=true
let code = "";
// 验证码
//验证码

$(function(){
    var show_num = [];
    // 页面初始化的时候,你看到是验证码是这个
     code = draw(show_num);

    $("#canvas").on('click',function(){
        code = draw(show_num);
    })
   
    $(".jx-yz").find("input").on("blur",function(){
        var val = $(".input-val").val().toLowerCase();
        var num = show_num.join("");
        if(val==''){
            $(this).siblings("p").css({
                "display":"block",
                "backgroundColor":"#ed787f",
                "width":"72px",
            })
            $(this).siblings("p").text("请输入验证码")
            judge=false
            return
        }else if(val == num){
            $(this).siblings("p").css({
                "display":"none",
                "backgroundColor":"#ed787f",
                "width":"72px",
            })
            judge=true
        }else{
            $(this).siblings("p").css({
                "display":"block",
                "backgroundColor":"#ed787f",
                "width":"147px",
            })
            judge=false
            $(this).siblings("p").text("验证码输入错误,请重新输入")
        }
    })
    //手机号
    $(".jx-zhh").find("input").on("focus",function(){
        $(this).siblings("p").css({
            "display":"block",
            "width":"102px",
            "backgroundColor":"#ccc"
        })
        $(".jx-zhh").css("border","1px solid #ff6666")
        $(this).siblings("p").text("请输入11位手机号")
    })
    $(".jx-zhh").find("input").on("blur",function(){
        var res=/^[1][^120]\d{9}$/
        if($(this).val()==""){
            $(this).siblings("p").css({
                "display":"block",
                "backgroundColor":"#ed787f",
                "width":"72px",
            })
            judge=false
            $(this).siblings("s").css("display","none")
            $(this).siblings("p").text("请输入手机号")
            return
        }else if(res.test($(this).val())){
            $(this).siblings("p").css({
                "display":"none",
                "backgroundColor":"#ccc",
            })
            judge=true
            $(this).siblings("s").css("display","inline-block")
            $(".jx-zhh").css("border","1px solid #ccc")
            }else{
                $(this).siblings("p").css({
                    "display":"block",
                    "backgroundColor":"#ed787f",
                    "width":"112px",
                })
                judge=false
                $(this).siblings("s").css("display","none")
                $(this).siblings("p").text("请输入正确手机号")
            }
        
    })

    //密码
    $(".jx-m").find("input").on("focus",function(){
        $(this).siblings("p").css({
            "display":"block",
            "backgroundColor":"#ccc"
        })
        $(this).siblings("s").css("display","none")
        $(".jx-mmm").css("border","1px solid #ed787f")
        $(this).siblings("p").text("8-20位字符，数字、大小写字母、符号三种组成")
    })
    $(".jx-m").find("input").on("blur",function(){
        var res=/^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&+-])[A-Za-z\d$@$!%*#?&+-]{8,20}$/
        if($(this).val()==""){
            $(this).siblings("p").css({
                "display":"block",
                "backgroundColor":"#ed787f",
            })
            judge=false
            $(this).siblings("s").css("display","none")
            $(this).siblings("p").text("请输入密码")
            return
        }else if(res.test($(this).val())){
            $(this).siblings("p").css({
                "display":"none",
                "backgroundColor":"#ccc",
            })
            judge=true
            $(this).siblings("s").css("display","inline-block")
            $(".jx-mmm").css("border","1px solid #ccc")
            }else{
                $(this).siblings("p").css({
                    "display":"block",
                    "backgroundColor":"#ed787f",
                })
                judge=false
                $(this).siblings("s").css("display","none")
                $(this).siblings("p").text("请输入正确密码")
            }
    })

    // 确认密码
    $(".jx-zm").find("input").on("focus",function(){
        $(".jx-zmmm").css("border","1px solid #ed787f")
    })
    $(".jx-zm").find("input").on("blur",function(){
        if($(this).val()==""){
            $(this).siblings("p").css({
                "display":"block",
                "backgroundColor":"#ed787f",
            })
            $(this).siblings("s").css("display","none")
            $(this).siblings("p").text("请再次输入密码")
        }else if($(this).val()==$(".jx-mmm input").val()){
            $(this).siblings("p").css({
                "display":"none",
                "backgroundColor":"#ed787f",
            })
            $(this).siblings("s").css("display","inline-block")
            $(".jx-zmmm").css("border","1px solid #ccc")
        }else{
            $(this).siblings("p").css({
                "display":"block",
                "backgroundColor":"#ed787f",
            })
            $(this).siblings("s").css("display","none")
            $(this).siblings("p").text("两次密码输入不一致")
        }
    })
    //表单注册
    $("form").on("submit",function(){
        
        // 手机号
        var res=/^[1][^120]\d{9}$/
            //验证码
            
            //密码
            var res2=/^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&+-])[A-Za-z\d$@$!%*#?&+-]{8,20}$/
            //获取输入的验证码
            console.log(code);
            //获取本地cookies数据
            var oUserList=JSON.parse(Cookies.get("users")||"[]")
            //获取页面上的数据,做成一个对象
            var oUser={
                name:this.user.value.trim(),
                pwd:this.pwd.value.trim(),
            }
            // 手机号验证
            if(!res.test(oUser.name)){
                layer.msg("请输入正确的手机号")
                return false
            }
            // 验证码验证
            var inputVal = document.querySelector(".input-val").value.trim().toLowerCase();
            console.log(inputVal,code);
            if(!(code==inputVal)){
                layer.msg("验证码输入错误")
                return false
            }
            // 密码验证
            if(!(res2.test(oUser.pwd))){
                layer.msg("请输入正确的密码")
                return false
            }
            if(!(oUser.pwd==$("input[name=pwd1]").val().trim())){
                layer.msg("两次密码不一致")
                return false
            }

            if(!$(".jx-zysx").find("input").prop("checked")){
                $(".fuwu").css("display","block")
                return false
            }
            $(".fuwu").css("display","none")
            // 进行比较
            var isExitst=true //默认不存在
            for(var i=0;i<oUserList.length;i++){
                if(oUserList[i].name ==oUser.name){
                    isExitst=false
                   break
                }
            }
            if(isExitst){
                oUserList.push(oUser);
                Cookies.set("users",JSON.stringify(oUserList),{expires:10})
                layer.alert("注册成功",{icon:1,title:"温馨提示"})
                
                return false
            }
            layer.alert("该用户已注册",{icon:2,title:"温馨提示"})
            
            
            return false
            // e.preventDefault()
    })




})

function draw(show_num) {
    var canvas_width=$('#canvas').width();
    var canvas_height=$('#canvas').height();
    var canvas = document.getElementById("canvas");//获取到canvas的对象，演员
    var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
    canvas.width = canvas_width;
    canvas.height = canvas_height;
    var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
    var aCode = sCode.split(",");
    var aLength = aCode.length;//获取到数组的长度
    
    for (var i = 0; i <= 3; i++) {
        var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
        var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
        var txt = aCode[j];//得到随机的一个内容
        show_num[i] = txt.toLowerCase();
        var x = 10 + i * 20;//文字在canvas上的x坐标
        var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
        context.font = "bold 23px 微软雅黑";

        context.translate(x, y);
        context.rotate(deg);

        context.fillStyle = randomColor();
        context.fillText(txt, 0, 0);

        context.rotate(-deg);
        context.translate(-x, -y);
    }
    for (var i = 0; i <= 5; i++) { //验证码上显示线条
        context.strokeStyle = randomColor();
        context.beginPath();
        context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
        context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
        context.stroke();
    }
    for (var i = 0; i <= 30; i++) { //验证码上显示小点
        context.strokeStyle = randomColor();
        context.beginPath();
        var x = Math.random() * canvas_width;
        var y = Math.random() * canvas_height;
        context.moveTo(x, y);
        context.lineTo(x + 1, y + 1);
        context.stroke();
    }
    return show_num.join("");
}

function randomColor() {//得到随机的颜色值
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    return "rgb(" + r + "," + g + "," + b + ")";
}
// 结束
  

//表单验证
// (function(){
//     function load(){
//         oform.onsubmit=function(){
//             // 手机号
//             var res=/^[1][^120]\d{9}$/
//             //验证码
//             var show_num = [];
//             draw(show_num);
//             var res1= show_num.join("");
//             console.log(res1);
//             //密码
//             var res2=/^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&+-])[A-Za-z\d$@$!%*#?&+-]{8,20}$/
//             //获取输入的验证码
//             var code=document.querySelector(".input-val").value.trim()
//             console.log(code);
            
//             //获取本地cookies数据
//             var oUserList=JSON.parse(Cookies.get("users")||"[]")
//             //获取页面上的数据,做成一个对象
//             var oUser={
//                 name:this.user.value.trim(),
//                 pwd:this.pwd.value.trim(),
//             }
//             // 手机号验证
//             if(!res.test(oUser.name)){
//                 layer.msg("请输入正确的手机号")
//                 return false
//             }
//             console.log((res1==code));
//             // 验证码验证
//             if(!(code==res1)){
//                 layer.msg("验证码输入错误")
//                 return false
//             }
//             console.log(111);
//             // 密码验证
//             // if(!(res2.test(oUser.pwd))){
//             //     layer.msg("请输入正确的密码")
//             //     return false
//             // }



//             // 进行比较
//             var isExitst=true //默认不存在
//             for(var i=0;i<oUserList.length;i++){
//                 if(oUserList[i].name ==oUser.name){
//                     isExitst=false
//                    break
//                 }
//             }
//             if(isExitst){
//                 oUserList.push(oUser);
//                 Cookies.set("users",JSON.stringify(oUserList),{expires:10})
//                 layer.msg("注册成功")
        
//                 return false
//             }
//             layer.msg("该用户已注册")
            
        
//             return false
//         }
//     }


//     window.onload=function(){
//         load()
//     }
// })()